<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <script type="text/javascript" src="../jquery-1.9.1.js"></script>
    <script type="text/javascript" src="iscroll.js"></script>

    <style type="text/css">
        ul,li{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
        </div>
        <ul id="thelist">
            <li>
                <img src="img/page1_img1.jpg"/>
            </li>
            <li>
                <img src="img/page1_img2.jpg"/>
            </li>
            <li>
                <img src="img/page1_img3.jpg"/>
            </li>
            <li>
                <img src="img/page1_img1.jpg"/>
            </li>
            <li>
                <img src="img/page1_img2.jpg"/>
            </li>
            <li>
                <img src="img/page1_img3.jpg"/>
            </li>
        </ul>
        <div id="pullUp">
            <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
        </div>
    </div>
</div>


<script type="text/javascript">
    /**
     * 下拉刷新 （自定义实现此方法）
     * myScroll.refresh(); // 数据加载完成后，调用界面更新方法
     */
    function pullDownAction() {
        setTimeout(function () {
            var el, li, i;
            el = document.getElementById('thelist');
            //==========================================
            $.ajax({
                type: "GET",
                url: "LoadMore.ashx",
                data: {page: generatedCount},
                dataType: "json",
                success: function (data) {
                    var json = data;
                    $(json).each(function () {
                        li = document.createElement('li');
                        // li.innerText = 'Generated row ' + (++generatedCount);
                        li.innerHTML = '<img src="' + this.src + '"/>';
                        el.insertBefore(li, el.childNodes[0]);
                    })
                }
            });
            myScroll.refresh(); //数据加载完成后，调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);  // <-- Simulate network congestion, remove setTimeout from production!
    }


    function pullUpAction() {
        setTimeout(function () {
            var el, li, i;
            el = document.getElementById('thelist');
            //==========================================
            $.ajax({
                type: "GET",
                url: "LoadMore.ashx",
                data: {page: generatedCount},
                dataType: "json",
                success: function (data) {
                    var json = data;
                    $(json).each(function () {
                        li = document.createElement('li');
                        //  li.innerText = 'Generated row ' + (++generatedCount);
                        li.innerHTML = '<img src="' + this.src + '"/>;'
                        el.insertBefore(li, el.childNodes[0]);
                    })
                }
            });
            //============================================
            myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
    }


    /**
     * 初始化iScroll控件
     */
    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');
        pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrapper', {
            scrollbarClass: 'myScrollbar', /* 重要样式 */
            useTransition: false,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });
        setTimeout(function () {
            document.getElementById('wrapper').style.left = '0';
        }, 800);
    }
    //初始化绑定iScroll控件
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

</script>
</body>
</html>